import React, { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';

export default function Gd() {

    let map =null

    useEffect(()=>{
         window._AMapSecurityConfig = {
            securityJsCode: "dc7ec78bdae6985185055226c79869c3",
        };


        // 加载地图
         AMapLoader.load({
            key: "422ad0ab91e1a3ca1cc46983a3eedf86", //申请好的Web端开发者key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            plugins:["AMap.Scale","AMap.ToolBar"]//需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
            //JS API 加载完成后获取AMap对象

               // 创建完成地图
                map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 15, // 初始化地图级别
                    center: [120.264370, 30.305488], // 初始化地图中心点位置
                });

                // 创建比例尺
                var scale = new AMap.Scale();
                // 将比例尺加入到地图中
                map.addControl(scale);

                // 缩放按钮
                const toolBar = new AMap.ToolBar()
                map.addControl(toolBar);



                //创建一个 Marker 实例：
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(120.264370, 30.305488), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: "九堡",

                });
                marker.on('click', () => {
                    alert('我在杭州等你哟！')
                })
                //将创建的点标记添加到已有的地图实例：
                map.add(marker);

                map.on('doubleClickZoom', () => {
                    alert('我在杭州等你哟！')
                })


                //  //构造矢量圆形
                // var circle = new AMap.Circle({
                //     center: new AMap.LngLat("120.464370", "30.305488"), //圆心位置
                //     radius: 10000, //半径 单位:米
                //     strokeColor: "#F33", //线颜色
                //     strokeOpacity: 1, //线透明度
                //     strokeWeight: 3, //线粗细度
                //     fillColor: "#ee2200", //填充颜色
                //     fillOpacity: 0.35, //填充透明度
                // });
                // //单独将点标记和矢量圆形添加到地图上
                // map.add(circle);



                // //多边形轮廓线的节点坐标数组
                // var path = [
                //     new AMap.LngLat(120.264370, 30.305488),
                //     new AMap.LngLat(120.564370, 30.505488),
                //     new AMap.LngLat(120.464370, 30.105488),
                //     new AMap.LngLat(120.664370, 30.505488),
                // ];
                // //创建多边形 Polygon 实例
                // var polygon = new AMap.Polygon({
                //     path: path, //路径
                //     fillColor: "#fff", //多边形填充颜色
                //     strokeWeight: 2, //线条宽度，默认为 2
                //     strokeColor: "red", //线条颜色
                // });

                // //多边形 Polygon对象添加到 Map
                // map.add(polygon);
                // //将覆盖物调整到合适视野
                // map.setFitView([polygon])

            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

            return ()=>{
                map?.destroy()
            }
    },[])


    return (
        <div>
            <div id="container" style={{
                padding: 0,
                margin: 0,
                height: 450
            }}
            ></div>

        </div>
    )
}
